<template>
  <div class="content_box">
    <!-- <div class="head_title">
      <p :style="{height:statusBarHeight+'px'}"></p>
      <div class="title_box" @click="changeStore" :style="{height:titleBarHeight+'px'}">
        <p class="text">杠小二·大学城店</p>
        <p class="sjx"></p>
      </div>
    </div> -->
    <!-- 栏目 -->
    <div class="lanmu_box">
      <div class="box">
        <van-tabs ref="tabs" v-model="active" @change="tabChange">
          <van-tab :title="item.name" v-for="(item,index) in lanmu" :key="index"></van-tab>
        </van-tabs>
      </div>
    </div>
    <div class="list_box" v-if="list.length">
      <div class="box" v-for="(item,index) in list" :key="index">
        <p class="status on" v-if="item.status == 'use'">使用中</p>
        <p class="status" v-if="item.status == 'reset'">设备复位</p>
        <p class="status on1" v-if="item.status == 'clear'">待打扫</p>
        <p class="status on2" v-if="item.status == 'stop'">整备中</p>
        <div class="img">
          <van-image
            width="100%"
            height="180rpx"
            fit="cover"
            lazy-load
            radius="10rpx"
            :src="item.roomImg&&item.roomImg.length?item.roomImg[0]:''"
          />
        </div>
        <div class="msg">
          <div class="left">
            <div>
              <p class="name">{{item.roomName}}</p> 
              <div class="label_box">
                <p v-for="(child,i) in item.roomLabelList" :key="i">{{child.labelName}}</p>
              </div>
            </div>
            <div class="price_box">
              <div class="price">
                <p class="old">￥<span>{{item.price}}</span>/小时</p>
              </div>
              <p class="jiantou" @click="clickCz(item)">操作</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="no_data" v-else>
      <img src="/static/images/no_sp.png" alt="">
      <p class="text">暂无房间</p>
    </div>

    <!-- 弹窗 -->
    <div class="pop_box">
      <van-popup position="bottom" :show="isAdmin" @close="closePop">
        <div class="box">
          <div class="title">
            <p>房间操作</p>
          </div>
          <div class="list" @click="openDoor">
            <p class="name">开房间门</p>
            <p class="icon">
              <!-- <img src="/static/images/opendoor1.png" alt=""> -->
              开门
            </p>
          </div>
          <div class="list" @click="openDian">
            <p class="name">房间开电</p>
            <p class="icon">
              <!-- <img src="/static/images/opendoor1.png" alt=""> -->
              开电
            </p>
          </div>
          <div class="list" @click="closeDian">
            <p class="name">房间断电</p>
            <p class="icon">
              <!-- <img src="/static/images/opendoor1.png" alt=""> -->
              断电
            </p>
          </div>
          <div class="list" @click="soundTest">
            <p class="name">音响测试</p>
            <p class="icon">
              <!-- <img src="/static/images/opendoor1.png" alt=""> -->
              测试
            </p>
          </div>
          <div v-if="!checked" class="list" @click="toEditRoom(true)">
            <p class="name">编辑房间</p>
            <p class="icon">
              <!-- <img src="/static/images/opendoor1.png" alt=""> -->
              编辑
            </p>
          </div>
          <div v-else class="list" @click="noEdit(0)">
            <p class="name">编辑房间</p>
            <p class="icon on">
              <!-- <img src="/static/images/opendoor1.png" alt=""> -->
              编辑
            </p>
          </div>
          <div v-if="!checked" class="list" @click="del">
            <p class="name">删除房间</p>
            <p class="icon">
              <!-- <img src="/static/images/opendoor1.png" alt=""> -->
              删除
            </p>
          </div>
          <div class="list" v-else @click="noEdit(1)">
            <p class="name">删除房间</p>
            <p class="icon on">
              <!-- <img src="/static/images/opendoor1.png" alt=""> -->
              删除
            </p>
          </div>
          <div v-if="!checked" class="list" @click="toTc">
            <p class="name">套餐价</p>
            <p class="icon">
              <!-- <img src="/static/images/opendoor1.png" alt=""> -->
              编辑
            </p>
          </div>
          <div v-else class="list">
            <p class="name">套餐价</p>
            <p class="icon on">
              <!-- <img src="/static/images/opendoor1.png" alt=""> -->
              编辑
            </p>
          </div>
          <div v-if="!checked" class="list" @click="toHours">
            <p class="name">小时价</p>
            <p class="icon">
              <!-- <img src="/static/images/opendoor1.png" alt=""> -->
              编辑
            </p>
          </div>
          <div v-else class="list">
            <p class="name">小时价</p>
            <p class="icon on">
              <!-- <img src="/static/images/opendoor1.png" alt=""> -->
              编辑
            </p>
          </div>
          <div v-if="roomMsg.status == 'clear'" class="list" @click="clearOver">
            <p class="name">打扫完成</p>
            <p class="icon">
              <!-- <img src="/static/images/opendoor1.png" alt=""> -->
              结束打扫
            </p>
          </div>

          <div class="list">
            <p class="name">房间上下架</p>
            <div>
              <van-switch
                :checked="checked"
                @change="changeUse"
              />
            </div>
          </div>
          <p class="line"></p>
          <p class="quxiao" @click="isAdmin = false">取消</p>
        </div>
      </van-popup>
    </div>
    <div class="anniu_box" :style="{paddingBottom:isIphoneXnum+'px'}">
      <div class="box" :style="{paddingBottom:isIphoneXnum+'px'}">
        <p class="anniu" @click="toEditRoom(false)"><van-icon name="plus" /> 新增房间</p>
      </div>
    </div>
  </div>
</template>
 
<script>

import {
  getRoomPageByStore,
  openRelays,
  closeRelays,
  openRoomDoor,
  setRoomStatus,
  delRoom,
  soundTest,
  cleanFinish,
} from "@/api/index";
import { Debounce } from "@/utils"
export default {
  components: {},
  data() {
    return {
      statusBarHeight: "", // 状态栏高度
      titleBarHeight: "", // 标题栏高度
      navBarHeight: "", // 导航栏总高度
      czShow:false,
      isAdmin:false,
      lanmu:[
        {
          name:'上架中'
        },
        {
          name:'已下架'
        },
      ],
      query:{
        current:1,
        size:10,
        storeId:'',
        status:'0'
      },
      list:[],
      roomId:'',
      checked:false,
      isIphoneXnum:0,
      activeShow:false,
      roomMsg:{}
    };
  },
  onShow() {
    this.getList(true)
  },

  methods: {

    // 测试音响
    soundTest(){
      wx.showModal({
        title: "温馨提示",
        content: "确定测试音响~",
        confirmText:'确认',
        success: (res)=>{
          if (res.confirm) {
            this.$showLoading('测试中...')
            soundTest({roomId:this.roomMsg.id}).then(res=>{
              if(res.statusCode == '00000'){
                wx.hideLoading()
                this.$toast('测试成功')
              }else{
                wx.hideLoading()
                this.$toast(res.message)
              }
            })
          }
        },
      });
    },

    // 结束打扫
    clearOver(){
      wx.showModal({
        title: "温馨提示",
        content: "确定结束打扫~",
        confirmText:'确认',
        success: (res)=>{
          if (res.confirm) {
            cleanFinish({roomId:this.roomMsg.id}).then(res=>{
              if(res.statusCode == '00000'){
                this.isAdmin = false
                this.query.current = 1
                this.getList(true)
              }else{
                this.$toast(res.message)
              }
            })
          }
        },
      });
    },

    toTc(){
      wx.navigateTo({
        url: `/pages/home/roomAdmin/editTc/main?roomId=${this.roomId}`,
      });
    },

    toHours(){
      wx.navigateTo({
        url: `/pages/home/roomAdmin/editHours/main?roomId=${this.roomId}`,
      });
    },

    // 商家中-编辑删除提示
    noEdit(num){
      if(num){
        this.$toast('上架中，不能删除~')
      }else{
        this.$toast('上架中，不能编辑~')
      }
    },

    // 删除优惠券
    del(){
      wx.showModal({
        title: "温馨提示",
        content: "是否删除该房间~",
        confirmText:'确认删除',
        success: (res)=>{
          if (res.confirm) {
            delRoom({roomId:this.roomId}).then(res=>{
              if(res.statusCode == '00000'){
                this.isAdmin = false
                this.getList(true)
              }else{
                this.$toast(res.message)
              }
            })
          }
        },
      });
    },

    // 状态切换
    tabChange(e){
      console.log(e)
      let index = e.mp.detail.index
      if(!index){
        this.query.status = '0'
        this.getList(true)
      }else{
        this.query.status = '1'
        this.getList(true)
      }
    },

    // 上下架
    changeUse(e){
      console.log(e)
      if(this.roomMsg.status == 'use'){
        this.$toast('使用中，不能下架！')
        return
      }
      if(this.checked){
        this.checked = false
        setRoomStatus({roomId:this.roomId,status:'stop'}).then(res=>{
          if(res.statusCode == '00000'){
            this.isAdmin = false
            this.getList(true)
            this.$toast('已下架')
          }else{
            this.$toast(res.message)
          }
        })
      }else{
        this.checked = true
        setRoomStatus({roomId:this.roomId,status:'free'}).then(res=>{
          if(res.statusCode == '00000'){
            this.isAdmin = false
            this.getList(true)
            this.$toast('已上架')
          }else{
            this.$toast(res.message)
          }
        })
      }
    },

    // 操作-弹窗
    clickCz(item){
      console.log(item)
      this.roomMsg = item
      this.isAdmin = true
      this.roomId = item.id
      if(item.status != 'stop'){
        this.checked = true
      }else{
        this.checked = false
      }
    },

    // 开电
    openDian:Debounce(function () {
      wx.showModal({
        title: "温馨提示",
        content: "确定开电~",
        confirmText:'确认',
        success: (res)=>{
          if (res.confirm) {
            this.$showLoading('开电中...')
            openRelays({roomId:this.roomMsg.id}).then(res=>{
              if(res.statusCode == '00000'){
                wx.hideLoading()
                this.$toast('开电成功')
              }else{
                wx.hideLoading()
                this.$toast(res.message)
              }
            })
          }
        },
      });
      
    },300),

    // 断电
    closeDian:Debounce(function () {
      wx.showModal({
        title: "温馨提示",
        content: "确定断电~",
        confirmText:'确认',
        success: (res)=>{
          if (res.confirm) {
            this.$showLoading('断电中...')
            closeRelays({roomId:this.roomMsg.id}).then(res=>{
              if(res.statusCode == '00000'){
                wx.hideLoading()
                this.$toast('断电成功')
              }else{
                wx.hideLoading()
                this.$toast(res.message)
              }
            })
          }
        },
      });
      
    },300),

    // 开门
    openDoor:Debounce(function () {
      wx.showModal({
        title: "温馨提示",
        content: "确定开门~",
        confirmText:'确认',
        success: (res)=>{
          if (res.confirm) {
            this.$showLoading('开门中...')
            openRoomDoor({roomId:this.roomId}).then(res=>{
              if(res.statusCode == '00000'){
                wx.hideLoading()
                this.$toast('开门成功')
              }else{
                wx.hideLoading()
                this.$toast(res.message)
              }
            })
          }
        },
      });
    },300),

    // 获取列表
    getList(state){
      this.$showLoading('加载中...')
      getRoomPageByStore(this.query).then(res=>{
        if(res.statusCode == '00000'){
          if(state){
            this.query.current = 1
            this.list = []
          }
          if(this.query.current != 1 && !res.data.records.length){
            this.$toast('已经到底了~')
            return
          }
          
          this.list = this.list.concat(res.data.records)
          wx.hideLoading()
          wx.hideNavigationBarLoading();
          wx.stopPullDownRefresh();
        }else{
          wx.hideLoading()
          wx.hideNavigationBarLoading();
          wx.stopPullDownRefresh();
          this.$toast(res.message)
        }
      })
    },

    // 关闭弹窗
    closePop(){
      this.isAdmin = false
    },

    // 跳转房间详情
    toEditRoom(state){
      this.isAdmin = false
      if(state){
        wx.navigateTo({
          url: `/pages/home/roomAdmin/editRoom/main?id=${this.roomId}&storeId=${this.query.storeId}`,
        });
        return
      }
      wx.navigateTo({
        url: `/pages/home/roomAdmin/editRoom/main?storeId=${this.query.storeId}`,
      });
    }
  },
  
  onLoad(options) {
    //判断手机机型，动态给底部添加样式
    wx.getSystemInfo({
      success: (res) => {
        console.log("手机信息res" + res.model);
        let modelmes = res.model;
        if (
          modelmes.search("iPhone 13") != -1 ||
          modelmes.search("iPhone 12") != -1 ||
          modelmes.search("iPhone 11") != -1 ||
          modelmes.search("iPhone X") != -1 ||
          modelmes.search("iPhone XR") != -1 ||
          modelmes.search("iPhone XS") != -1
        ) {
          this.isIphoneXnum = 25;
        } else {
          this.isIphoneXnum = 0;
        }
      },
    });
    console.log(options)
    this.query.storeId = options.storeId
    // this.query.status = '0'
    this.getList(true)
  },
  beforeMount() {
    const self = this;
    wx.getSystemInfo({
      success(system) {
        console.log(`system:`, system);
        self.statusBarHeight = system.statusBarHeight;
        let platformReg = /ios/i;
        if (platformReg.test(system.platform)) {
          self.titleBarHeight = 44;
        } else {
          self.titleBarHeight = 48;
        }
        self.navBarHeight = self.statusBarHeight + self.titleBarHeight;
      },
    });
  },
  // 下拉刷新
  onPullDownRefresh(){
    //在当前页面显示导航条加载动画
    wx.showNavigationBarLoading();
    this.query.current = 1
    this.query.size = 10
    this.getList(true)
  },
  // 上拉加载
  onReachBottom(){
    console.log('到底了')
    this.query.current += 1
    this.getList()
  },
  onHide() {},
  onUnload() {
    this.query = {
        current:1,
        size:10,
        storeId:'',
        status:'0'
      }
  },
};
</script>

<style lang="scss" scoped>
.content_box{
  .lanmu_box{
    height: 88rpx;
    margin-bottom:20rpx;
    .box{
      position: fixed;
      top:0;
      width: 100%;
      z-index: 100;
      background: #fff;
    }
    /deep/ .van-tab{
      color:#999;
      font-size:30rpx;
    }
    /deep/ .van-tabs__line{
      background: #222;
    }
    /deep/ .van-tab--active{
      color:#222;
      font-weight: bold;
    }
  }
  .list_box{
    .box{
      margin:30rpx 30rpx 40rpx 30rpx;
      background: #fff;
      padding:24rpx;
      box-shadow: 0rpx 10rpx 20rpx 4rpx rgba(139, 129, 114, 0.1);
      border-radius: 20rpx;
      display: flex;
      position: relative;
      .status{
        position: absolute;
        top:0;
        right: 6rpx ;
        padding:0 16rpx;
        height: 40rpx;
        background: #1E68FF;
        z-index: 20;
        font-size:22rpx;
        color:#fff;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom-left-radius: 16rpx;
        border-top-right-radius: 16rpx;
        font-weight: 500;
        &.on{
          background: #F04925;
        }
        &.on1{
          background: #3A77E5;
        }
        &.on2{
          background: #aaa;
        }
      }
      .img{
        width: 180rpx;
      }
      .msg{
        display: flex;
        justify-content: space-between;
        flex: 1;
        margin-left:20rpx;
        .left{
          width: 100%;
          display: flex;
          flex-direction:column;
          justify-content: space-between;
          .name{
            font-weight: bold;
            color:#000;
            font-size:32rpx
          }
          .label_box{
            margin-top:12rpx;
            p{
              display: inline-block;
              margin-right:20rpx;
              font-size:24rpx;
              border:1px solid #788933;
              padding:2rpx 18rpx;
              border-radius: 4rpx;
              color:#788933;
              font-weight: 500;
              &:last-child{
                margin-right:0;
              }
            }
          }
        }
      }
      .price_box{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top:30rpx;
        position: relative;
        .price{
          display: flex;
          color:#000;
          font-size:26rpx;
          align-items: baseline;
          span{
            font-size:40rpx;
            font-weight: bold;
          }
        }
        .jiantou{
          width: 100rpx;
          height: 40rpx;
          background: #eee;
          border-radius: 50rpx;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          color:#222;
          font-size:26rpx;
        }
      }
    }
  }
  .pop_box{
    /deep/ .van-popup {
      border-top-right-radius: 20rpx !important;
      border-top-left-radius: 20rpx !important;
    }
    .box{
      .title{
        height: 104rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color:#323233;
        font-size:34rpx;
        border-bottom:1px solid #f0f0f0;
        position: relative;
        .tb{
          position: absolute;
          right:30rpx;
        }
      }
      .list{
        height: 104rpx;
        border-bottom:1px solid #f5f5f5;
        padding:0 40rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .name{
          font-size:32rpx;
          color:#323233;
        }
        .icon{
          width: 196rpx;
          height: 60rpx;
          display:flex;
          align-items: center;
          justify-content: center;
          border:1px solid #222;
          color:#222;
          font-size:28rpx;
          font-weight: 500;
          border-radius: 50rpx;
          &.on{
            opacity: 0.5;
          }
        }
        div{
          display: flex;
        }
        .tips{
          font-size:24rpx;
          color:red;
          margin-top:10rpx;
        }
        img{
          width: 32rpx;
          height: 32rpx;
          margin-right:10rpx;
        }
      }
      .line{
        width: 100%;
        height: 16rpx;
        background: #f8f8f8;
      }
      .quxiao{
        height: 100rpx;
        line-height: 100rpx;
        font-size:32rpx;
        color:#323233;
        text-align: center;
      }
    }
  }
  .anniu_box{
    height: 150rpx;
    width: 100%;
    background: #fff;
    .box{
      width: 92%;
      height: 150rpx;
      line-height: 150rpx;
      position: fixed;
      bottom:0;
      left: 0;
      padding:0 30rpx;
      background: #fff;
      z-index: 10;
      .anniu{
        box-shadow: 0rpx 10rpx 20rpx #CEDBFA;
        border:none;
        width: 100%;
        height: 88rpx;
        line-height: 88rpx;
        background: #1E68FF;
        border-radius: 100rpx;
        text-align: center;
        color: #fff;
        font-size: 30rpx;
      }
    }
  }
  .no_data{
    text-align: center;
    font-size:28rpx;
    color:#333;
    padding-top:150rpx;
    .text{
      font-weight: 500;
      color:#999;
    }
    img{
      width: 248rpx;
      height: 248rpx;
    }
  }
}
</style>
